/* From Uiverse.io by vinodjangid07 */
.toggle {
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   width: 48px;
   height: 28px;
   background-color: rgb(82, 82, 82);
   border-radius: 20px;
   cursor: pointer;
   transition-duration: 0.2s;

   &::after {
      content: "";
      position: absolute;
      height: 9.5px;
      width: 9.5px;
      left: 4px;
      background-color: transparent;
      border-radius: 50%;
      transition-duration: 0.2s;
      box-shadow: 5px 2px 7px rgba(8, 8, 8, 0.26);
      border: 5px solid white;
   }
}

.checkbox {
   display: none;

   &:checked + .toggle::after {
      transform: translateX(100%);
      transition-duration: 0.2s;
      background-color: white;
   }

   /* Switch background change */
   &:checked + .toggle {
      background-color: var(--color-primary);
      transition-duration: 0.2s;
   }
}
